<template>
	<view class="wui-popup" :class="[value ? 'wui-popup-show' : 'wui-popup-hidd']" :style="[value?popupZindexComputed:{}]"  @click="$emit('input',false)">
		<view class="wui-mask" :style="[maskZindexComputed]"></view>
		<view class="wui-popup-content" :style="[topComputed,widthComputed,heightComputed,popupZindexComputed]" @click.stop.prevent="() => false"
			:class="['wui-popup-mode-' + mode]">
			这是内容
		</view>
	</view>
</template>

<script>
	export default {
		name:'w-popup',
		props: {
			value: {
				type: Boolean,
				default: false
			},
			mode: {
				type: String,
				default: 'right'
			},
			// width 只针对mode为left/right
			width: {
				type: String,
				default: '50%'
			},
			// height 只针对mode为top/bottom
			height: {
				type: String,
				default: '30%'
			},
		},
		watch: {
			value(val) {
				this.$emit('input', val);
			},
		},
		mounted() {
			console.log()
		},
		computed: {
			popupZindexComputed(){
				return {
					zIndex:this.uniWuiConfig.zIndex.popup
				}
			},
			maskZindexComputed(){
				return {
					zIndex:this.uniWuiConfig.zIndex.popup - 1
				}
			},
			topComputed() {
				let customBar = 0;
				// #ifdef MP-WEIXIN
				const custom = wx.getMenuButtonBoundingClientRect();
				customBar = custom.bottom + custom.top - this.systemInfo.statusBarHeight;
				// #endif
				// #ifdef H5
				customBar = 44;
				// #endif
				if (this.mode === 'bottom') return {}
				return {
					'--top': customBar + 'px'
				}
			},
			widthComputed() {
				if(this.mode =='left'||this.mode=='right'){
					return {
						width: this.width
					}
				}else{
					return {}
				}
			},
			heightComputed() {
				if(this.mode =='top'||this.mode=='bottom'){
					return {
						height: this.height
					}
				}else{
					return {}
				}
			}
		}
	};
</script>

<style lang="scss" scoped>
	.wui-popup {
		position: fixed;
		top: 0;
		left: 0;
		transition: all .3s;

		.wui-mask {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			transition: all .3s;
		}

		.wui-popup-content {
			position: fixed;
			top:var(--top);
			background-color: #fff;
			transition: all .3s;
		}

		.wui-popup-mode-left {
			height: calc(100% - var(--top));
			overflow-y: auto;
			left: 0;
		}

		.wui-popup-mode-right {
			height: calc(100% - var(--top));
			overflow-y: auto;
			right: 0;
		}

		.wui-popup-mode-bottom {
			bottom: 0;
			width: 100%;
		}

		.wui-popup-mode-top {
			width: 100%;
		}
	}

	.wui-popup-show {
		z-index: 9960;

		.wui-mask {
			background-color: rgba(0, 0, 0, 0.4);
		}

		.wui-popup-mode-left {
			transform: translateX(0);
		}

		.wui-popup-mode-right {
			transform: translateX(0);
		}

		.wui-popup-mode-bottom {
			transform: translateY(0);
		}

		.wui-popup-mode-top {
			transform: translateY(0);
		}
	}

	.wui-popup-hidd {
		z-index: -10;

		.wui-mask {
			background-color: transparent;
		}

		.wui-popup-mode-left {
			transform: translateX(-100%);
		}

		.wui-popup-mode-right {
			transform: translateX(100%);
		}

		.wui-popup-mode-bottom {
			transform: translateY(100%);
		}

		.wui-popup-mode-top {
			transform: translateY(-100%);
		}
	}
</style>
